<template>
	<view class="user-name" style="width: 100%; display: flex; align-items: center;">
		<view>{{ userInfo.userName }}</view>
		<block v-if="userInfo.parentUserName">
			<u-icon style="margin: 0 12rpx;" size="12px" color="#ccc" name="play-right-fill" />
			<view >{{ userInfo.parentUserName }}</view>
		</block>
		
	</view>
	<view class="comment-content">{{ userInfo.content }}</view>
	<view class="info-box">
		<view class="left-time">
			<view style="margin-right: 32rpx;" v-if="userInfo.createTime">{{ userInfo.createTime }}</view>
			<view class="reply" @click="handleReply(userInfo)">回复</view>
			<view class="del" @click="handleDel(userInfo)" v-if="userInfo.userId == 1">删除</view>
		</view>

		<view class="right-icon">
			<view class="item-box">
				<u-icon size="24px" :color="userInfo.likeStatus? 'red' : '#606266'" :name="userInfo.likeStatus? 'heart-fill' : 'heart'" @click="handleLink(userInfo)" />
				<text style="margin-left: 8rpx; font-weight: 700;">{{ userInfo.totalLikes }}</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { defineProps } from 'vue';
	import dayjs from 'dayjs';
	
	const props = defineProps({
		userInfo: Object || {},
		index: Number || String,
		flag: String
	});
	
	// 定义事件 - 回复 / 删除
	const emit: any = defineEmits(['replyCB', 'delCB', 'linkCB'])
	
	// 点击回复回调
	const handleReply = (item: any) => {
		emit('replyCB', item, props.flag)
	}
	
	// 删除评论回调
	const handleDel = (item) => {
		emit('delCB', item, props.flag)
	}
	
	// 点赞回调
	const handleLink = (item) => {
		emit('linkCB', item, props.index, props.flag)
	}
</script>

<style lang="scss" scoped>
	.user-name {
		width: 100%;
		font-size: 32rpx;
		color: #ccc;
		white-space: nowrap;
		/* 保证文本在一行内显示 */
		overflow: hidden;
		/* 超出容器部分隐藏 */
		text-overflow: ellipsis;
		/* 使用省略号表示被截断的文本 */
	}

	.comment-content {
		margin-top: 12rpx;
		font-size: 28rpx;
		color: #000;
		font-weight: 700;
		display: flex;
		flex-wrap: wrap;
		line-height: 32rpx;
	}

	.info-box {
		margin-top: 12rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left-time {
			display: flex;
			color: #ccc;
			font-size: 28rpx;

			.reply {
				margin-right: 32rpx;
				cursor: pointer;
			}
			
			.del {
				color: #000;
			}
		}

		.right-icon {
			display: flex;
			align-items: center;
			font-size: 28rpx;

			.item-box {
				display: flex;
				align-items: center;
			}

			.item-box:last-child {
				margin-left: 32rpx;
			}
		}
	}
</style>